<script setup lang="ts">
import VirtualList from '@/components/Chat/VirtualList'
import MsgItem from '@/components/Chat/MsgItem/index.vue'
import { ref } from 'vue'
import { useChatStorage } from '@/stores/chat.ts'
const msgList = ref([
  { id: 1, message: '1' },
  { id: 2, message: '2' },
  { id: 3, message: '3' },
  { id: 4, message: '4' },
  { id: 5, message: '5' },
  { id: 6, message: '6' },
  { id: 7, message: '7' },
  { id: 8, message: '8' },

  { id: 9, message: '9' },
  { id: 10, message: '10' },
  { id: 11, message: '11' },
  { id: 12, message: '12' },
])

//获取消息列表存储的数据
const chatStorage = useChatStorage()
const msgMap = chatStorage.getMsgMap()

</script>

<template>
  <div class="chat-msg-list">
    <!--会话名-->
    <RoomName />
    <!--消息渲染-->
    <VirtualList :item="MsgItem" :data-key="'id'" :data="msgList" />
    <MsgItem :is-me="true" />
  </div>
</template>

<style scoped lang="scss">
.chat-msg-list {
  width: 100%;
  position: relative;
  background-color: var(--background-secondary);
  flex: 1;
  padding-bottom: 40px;
  margin-bottom: 20px;
}
</style>
